<template>
  <div class="not-found-page">
    <n-card class="not-found-card cute-card">
      <div class="not-found-content">
        <div class="not-found-icon">
          <n-icon size="64" color="#ff85a2">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></g></svg>
          </n-icon>
        </div>
        
        <h1 class="not-found-title">404</h1>
        <p class="not-found-desc">哎呀，页面走丢了~</p>
        
        <div class="not-found-actions">
          <n-button type="primary" size="large" round @click="handleBackToHome">
            返回首页
          </n-button>
        </div>
      </div>
    </n-card>
    
    <div class="not-found-decoration">
      <div class="cute-decoration heart" style="top: 10%; left: 10%;"></div>
      <div class="cute-decoration heart" style="top: 20%; right: 15%;"></div>
      <div class="cute-decoration heart" style="bottom: 15%; left: 20%;"></div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const handleBackToHome = () => {
  router.push('/');
};
</script>

<style scoped>
.not-found-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  padding: 20px;
  position: relative;
}

.not-found-card {
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.not-found-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}

.not-found-icon {
  margin-bottom: 24px;
  background-color: rgba(255, 133, 162, 0.1);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.not-found-title {
  font-size: 48px;
  color: var(--primary-color);
  margin-bottom: 16px;
  font-weight: bold;
}

.not-found-desc {
  font-size: 18px;
  color: #666;
  text-align: center;
  margin-bottom: 32px;
}

.not-found-actions {
  display: flex;
  gap: 16px;
}

.not-found-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
</style> 